<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大作业</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2086078_bbh6rn73mq.css">
</head>

<body>
    <div class="pic">
        <div class="title">
            <p>MY TEAM</p>
        </div>
        <div class="container">
            <!-- 傅晓海 -->
            <div class="one">
               <div class="one-left">
                   <img class="one-img" src="img/傅晓海.jpg" alt="">
                   <div class="one-text">
                    <h2 class="name">傅晓海</h2>
                    <p class="jiyu">长风破浪会有时，直挂云帆济沧海！</p>
                    <a class="bnt" href="https://fu_xiaohai.gitee.io/fuxiaohai">了解更多</a>
                   </div>
                </div>
               <div class="one-right">
                   <p>职位：项目统筹组长</p>
                   <p>兴趣爱好：打代码、看书、学习</p>
                   <p>座右铭：代码虐我千百遍，我待代码如初恋</p>
               </div>
            </div>
            <!-- 桂学婷 -->
            <div class="two">
                <div class="two-left">
                   <p>职位：项目统筹副组长</p>
                   <p>兴趣爱好：吃饭睡觉打豆豆</p>
                   <p>座右铭：我就是我，是颜色不一样的烟火</p>
                </div>
                <div class="two-right">
                    <img src="img/桂学婷.jpg" alt="">
                    <div class="two-text">
                     <h2 class="name">桂学婷</h2>
                     <p class="jiyu">生活总是让我们遍体鳞伤，但到后来，那些受伤的地方一定会变成我们最强壮的地方</p>
                     <a class="bnt" href="https://gui-xueting.gitee.io/guixueting">了解更多</a>
                    </div>
                </div>
            </div>
            <!-- 刘雨-->
            <div class="three">
                <div class="three-left">
                    <img class="three-img" src="img/刘雨.jpg" alt="">
                    <div class="three-text">
                     <h2 class="name">刘雨</h2>
                     <p class="jiyu">只要目标向前，你可以到任何的地方</p>
                     <a class="bnt" href="https://liuyu-giteejdb.gitee.io/liu-yus-personal-webpage">了解更多</a>
                    </div>
                 </div>
                <div class="three-right">
                   <p>职位：项目图片编辑</p>
                   <p>兴趣爱好：平时喜欢看综艺、电影；没事也去跑跑步、游泳</p>
                   <p>座右铭：生活原本沉闷，但跑起来就会有风</p>
                </div>
             </div>
             <!-- 金萌萌 -->
            <div class="four">
                <div class="four-left">
                   <p>职位：项目动画渲染</p>
                   <p>兴趣爱好：rap、守望先锋、追星</p>
                   <p>座右铭：别人怎样看你，和你毫无关系。你要怎样活，也和别人毫无关系</p>
                </div>
                <div class="four-right">
                    <img class="four-img" src="img/金萌萌.jpg" alt="">
                    <div class="four-text">
                     <h2 class="name">金萌萌</h2>
                     <p class="jiyu">人生没有绝对的公平，而是相对公平。在一个天平上，你得到越多，势必要承受更多，每一个看似低的起点，都是通往更高峰的必经之路</p>
                     <a class="bnt" href="https://jqueen123.gitee.io/personal-page9">了解更多</a>
                    </div>
                </div>
            </div>
            <!-- 邱添 -->
            <div class="five">
                <div class="five-left">
                    <img class="five-img" src="img/邱添.jpg" alt="">
                    <div class="five-text">
                     <h2 class="name">邱添</h2>
                     <p class="jiyu">愿你每天都能睡到自然醒</p>
                     <a class="bnt" href="https://qiutian1999.gitee.io/qiutian-page-one/">了解更多</a>
                    </div>
                 </div>
                <div class="five-right">
                   <p>职位：项目文字排版</p>
                   <p>兴趣爱好：打游戏、听相声、绘画</p>
                   <p>座右铭：卒然临之而不惊，无故加之而不怒</p>
                </div>
            </div>
             <!-- 汪孔媛 -->
            <div class="six">
                <div class="six-left">
                   <p>职位：项目漏洞修补</p>
                   <p>兴趣爱好：看电影 、看书、旅游</p>
                   <p>座右铭：黎明将近，前进吧少女</p>
                </div>
                <div class="six-right">
                    <img class="six-img" src="img/汪孔源.jpg" alt="">
                    <div class="six-text">
                     <h2 class="name">汪孔媛</h2>
                     <p class="jiyu">身体和灵魂总有一个在路上</p>
                     <a class="bnt" href="https://wangkongyuan.gitee.io/dazuoyeend">了解更多</a>
                    </div>
                </div>
            </div>
    
        </div>
    </div>
    <div class="scoll">
       <i class="iconfont icon-huidaodingbu"></i>
    </div>
    <script>
        $(window).scroll(function(){
            let scrollTop = $(window).scrollTop();
            let opacity;
            console.log(scrollTop);
            opacity = scrollTop/200;

            if(scrollTop>=200){
            opacity=1;
        }
        
        $(".scoll").css({opacity:opacity});
        }) 
        $(".scoll").click(function(){
            $("html").animate({scrollTop:"0px"},1000);
        })
    </script>
</body>

</html>